<template>
	<view class="u-page">
		<u-navbar
		:autoBack="true"
		:leftIconColor="tksetting.titlecolor" :bgColor="tksetting.color" :titleStyle="{color:tksetting.titlecolor}" :title="title"  :placeholder="true">
		</u-navbar>
		
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
					labelPosition="left"
					:model="model1"
					labelWidth	="90"
					:labelStyle="labelStyle"
					ref="form1"
				>
				
					
					<u-form-item
						label="新密码"
						prop="userInfo.passwd"
						borderBottom
						required
						ref="item1"
					>
					<u--input
							v-model="model1.userInfo.passwd"
							border="none"
							type="password"
							placeholder="请输入新密码"
						></u--input>
					</u-form-item>
					
					<u-form-item
						label="重复新密码"
						prop="confirm_passwd"
						borderBottom
						ref="item1"
						:required="true"
					>
						<u--input
							v-model="model1.confirm_passwd"
							border="none"
							type="password"
							placeholder="请重复输入密码"
							ref="cf"
						></u--input>
					</u-form-item>

				</u--form>
				
				<u-button
					type="primary"
					text="更新"
					customStyle="margin-top: 50px"
					:color="tksetting.color"
					@click="submit"
				></u-button>
		
	</view>
</template>

<script>
import {toast,wxcode,clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
import { mapState } from 'vuex';
import BASE_URL from '@/api/env.js' //引入接口共用地址
	export default {
		data() {
			return {
				
				title:'个人信息',
				
				labelStyle:{"font-weight":600},
				fileList1: [],
				fileList2:[],
				disabled1: false,
			
				xieyi:0,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				session_ke:'',
				areaname:'',
				model1: {
					    userInfo: {
						name: '',
						passwd:'',
						pic:'',
					},
					confirm_passwd:''
				},
				showSex: false,
				showarea:false,
				birthday: Number(new Date()),
				arealist: [],
				rules: {
					'userInfo.passwd': {
						type: 'string',
						required: true,
						min:6,
						message: '请输入6位以上密码',
						trigger: ['blur']
					},
					confirm_passwd:[{
						type: 'string',
						message: '请重复输入密码',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							if (value != this.model1.userInfo.passwd) {
							   return false;
							}else{
							   return true;
							}
						},
						message: '两次密码不一样',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur","change"],
					}],
				},
			}
		},
		onLoad() {
			this.init();
		},
		computed:{
			...mapState(['tksetting'])
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			async init(){
				this.$api.baseInfo().then(res => {
					//console.log(res)
					this.model1.userInfo.name=res.data.name;
					this.fileList1.push({"url":res.data.pic})
					
				})
			},
			async getarealist(){
				const res=await this.$api.arealist({t1:'label',t2:'id',all:''});
				
				if (res.code == 0) {
					this.arealist=[res.data];
					this.showarea=true;
				}
			},
			routs(id){
				useRouter('/pages/public/page',{id:id},'navigateTo')
			},
			navigateBack() {
				uni.navigateBack()
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			change(e) {
				// console.log(e);
			},
		
			async submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				const _this=this;
				
				try{
					this.model1.userInfo.pic=this.fileList1[0].url;
					//this.model1.userInfo.xd_pic=this.fileList2[0].url;	
				}catch(e){}
				
				const yz=await  _this.$refs.form1.validate().then(res => {
					return true;
				}).catch(errors => {
					uni.$u.toast('请将注册信息输入完整');
					return false
				})
				if(yz){
					
					const ress= await  _this.$api.baseInfoSave(_this.model1.userInfo);
					if(ress.code==0){
						uni.$u.toast(ress.msg)
						uni.navigateBack();
					}else{
						uni.$u.toast(ress.msg)
					}
				}	
				
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			
			confirm(e) {
			    this.areaname=e.value[0].label;
				this.model1.userInfo.area=e.value[0].id;
				this.showarea=false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.model1.userInfo.pic='';
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				let _this=this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:BASE_URL + '/upload/upimg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						header:{
							token:getStorageSync('token')
						},
						success: (res) => {
							console.log(res)
							let shopewm=JSON.parse(res.data).data;
							resolve(shopewm)
						},
					});
				});
			},
		},
	}
</script>

<style lang="scss">
	
.u-page{
	padding: 20rpx;
}

</style>
